<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .btn{
            border:none;
            outline: none;
            padding:15px 25px;
            margin: 0 15px;
            background: #999;
            color:#f50;
            font-size: 20px;
            border-radius: 10px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <button class="btn" v-shuibowen="bg1">立即登录</button>
        <button class="btn" v-shuibowen="'#f50'">马上注册</button>

    </div>

    <script>
        // 全局注册指令
        Vue.directive('shuibowen',{
            bind(el,binding){
                el.addEventListener('click',function(e){
                    var e = e || window.event
                    var clientX = e.clientX;
                    var clientY = e.clientY;

                    var left = el.offsetLeft;
                    var top = el.offsetTop;

                    var x = clientX - left;
                    var y = clientY - top;

                    console.log(x,y)

                    var span = document.createElement('span')
                    span.style.position = "absolute"
                    span.style.background = binding.value || 'rgba(0,0,0,0.5)'
                    span.style.opacity = 1;
                    span.style.borderRadius = '50%'

                    el.append(span)
                    var width = 0;
                    var height = 0;
                    var opacity = 1;
                    var maxWidth = el.clientWidth;
                    var timer = setInterval(()=>{
                        width+=5;
                        height+=5;
                        opacity-=0.05;
                        if(width<maxWidth){
                            span.style.width = width+'px'
                            span.style.height = height+'px'
                            span.style.opacity = opacity;
                            span.style.left = x - span.clientWidth/2 + 'px'
                            span.style.top = y - span.clientHeight /2 + 'px'
                        }else{
                            clearInterval(timer)
                            timer=null;
                            span.remove()
                        }
                        // if(opacity>0){
                        //     span.style.width = width+'px'
                        //     span.style.height = height+'px'
                        //     span.style.opacity = opacity;
                        //     span.style.left = x - span.clientWidth/2 + 'px'
                        //     span.style.top = y - span.clientHeight /2 + 'px'
                        // }else{
                        //     clearInterval(timer)
                        //     timer=null;
                        //     span.remove()
                        // }
                    },20)
                })
            },
            inserted(el,binding){

            }
        })
        const vm = new Vue({
            data:{
                title:"Vue 自定义水波纹动画指令",
                bg1:'#ccc'
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")

        // v-shuibowen 
        // button 出现一个水波纹效果 
    </script>
 
</body>
</html>